import React, { Component } from "react";
import * as echarts from "echarts";
export class VisitorLog extends Component {
  componentDidMount() {
    this.renderChart();
  }
  renderChart() {
    const chartContainer = document.getElementById("barsChart");
    const myChart = echarts.init(chartContainer);
    const option = {
      legend: {
        icon: "circle",
        textStyle: {
          color: "#fff",
        },
      },
      tooltip: {},
      dataset: {
        dimensions: ["product", "今日外来访客", "昨日外来访客"],
        source: [
          {
            product: "二月",
            今日外来访客: 540,
            昨日外来访客: 700,
          },
          {
            product: "三月",
            今日外来访客: 200,
            昨日外来访客: 680,
          },
          {
            product: "四月",
            今日外来访客: 500,
            昨日外来访客: 100,
          },
          {
            product: "五月",
            今日外来访客: 600,
            昨日外来访客: 480,
          },
        ],
      },
      xAxis: { type: "category" },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        {
          type: "bar",
          barWidth: "10px",
          itemStyle: {
            normal: {
              barBorderRadius: [50, 50, 50, 50],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#3333ff",
                },
                {
                  offset: 1,
                  color: "#b105ff",
                },
              ]),
            },
          },
        },
        {
          type: "bar",
          barWidth: "10px",
          itemStyle: {
            normal: {
              barBorderRadius: [50, 50, 50, 50],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#3cdf8c",
                },
                {
                  offset: 1,
                  color: "#059d15",
                },
              ]),
            },
          },
        },
      ],
    };
    myChart.setOption(option);
  }
  render() {
    return <div id="barsChart"></div>;
  }
}

export default VisitorLog;
